import React, { Component } from 'react';
import { findCinemas } from '@/api/MaiZuo';

export default class Cinema extends Component {
  myRef = React.createRef();

  // axios 请求数据
  // axios
  //   .get("/api/cinema")
  //   .then((res) => {})
  //   .catch((err) => {});
  constructor() {
    super();
    this.state = {
      cinemaList: [],
      allCinemaList: [],
    };
    findCinemas().then((res) => {
      // console.log(res);

      this.setState({
        cinemaList: res.cinemas,
        allCinemaList: res.cinemas,
      });
    });
  }

  render() {
    return (
      <div>
        <div className='search'>
          <input
            type='text'
            placeholder='请输入影院名称'
            ref={this.myRef}
            onInput={this.handleInput}
          />
        </div>
        <ul className='cinemaList'>
          {this.state.cinemaList.map((item, index) => {
            return (
              <li key={item.cinemaId}>
                <div className='cinemaName'>{item.name}</div>
                <div className='cinemaAddress'>{item.address}</div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

  handleInput = (event) => {
    console.log('click', event.target.value);

    const cinemaList = this.state.allCinemaList.filter(
      (item) =>
        item.name.toUpperCase().includes(event.target.value.toUpperCase()) ||
        item.address.toUpperCase().includes(event.target.value.toUpperCase())
    );

    console.log('newCinemaList', cinemaList);

    // 每次都覆盖
    this.setState({
      cinemaList,
    });
  };
}
